<template>
  <div>
      <el-row style="background-color: white">
      <el-col :span="5">
        <a style="color: #606266" href="#">首页</a>
        <a style="color: #dcdfe6" href="#">/ 资产管理 </a>
        <a style="color: #dcdfe6" href="#">/ 楼栋信息</a></el-col
      >
    </el-row>
<hr />
<el-row style="background-color: white">
        <el-col :span="3"><a style="color: #606266;font-size:25px;">费用项信息：</a></el-col>
        <el-col :span="3"><el-button type="primary" style="margin-left: 1000px"  @click="dialogFormVisible = true">添加楼栋<i class="el-icon-upload el-icon--right"></i></el-button></el-col>
    </el-row>
    <template>
        <el-table :data="pagination.records" style="width: 100%">
        <el-table-column sortable prop="pid" label="费用项ID" width="200">
        </el-table-column>
          <el-table-column prop="pname" label="费用名称" width="200">
        </el-table-column>
        <el-table-column prop="paymentcycle" label="缴费周期(单位:月)" width="230">
        </el-table-column>
        <el-table-column prop="money" label="计费单价(单位:元)" width="180">
        </el-table-column>
        <el-table-column label="操作" width="300" align=center> 
            <template slot-scope="scope">
              <el-button size="medium" @click="demo(scope.row)" round>修改</el-button>
              <el-button size="medium" @click="demo2(scope.row)" round>删除</el-button>
        </template>
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[3, 5, 8, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    >
    </el-pagination>
    </template>
    <!--添加页面代码-->
    <el-dialog :append-to-body="true" title="添加楼栋信息" :visible.sync="dialogFormVisible">
        <el-form>
        <el-form-item label="收费项名称：" label-width="150px">
          <el-input
          v-model="addinfo.pname"
          placeholder="必填，请填写收费项名称"
           autocomplete="off">
           </el-input>
        </el-form-item>
        <el-form-item label="缴费周期(单位:月)：" label-width="150px">
          <el-input
          v-model="addinfo.paymentcycle"
          placeholder="必填，请填写缴费周期"
           autocomplete="off">
           </el-input>
        </el-form-item>
        <el-form-item label="计费单价(单位:元)：" label-width="150px">
          <el-input
          v-model="addinfo.money"
          placeholder="必填，请填写计费单价"
           autocomplete="off">
           </el-input>
        </el-form-item>
        </el-form>
        <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">保存</el-button>
        </div>
      </el-dialog>

      <!--修改页面代码-->
    <el-dialog :append-to-body="true" title="修改收费项信息" :visible.sync="dialogFormVisibleupdate">
        <el-form>
            <el-form-item label="收费项编号" label-width="150px">
          <el-input
          placeholder="编号不可更改"
          v-model="updinfo.pid"
          :disabled="true">
        </el-input>
        </el-form-item>
        <el-form-item label="收费项名称：" label-width="150px">
          <el-input
          v-model="updinfo.pname"
          placeholder="必填，请填写收费项名称"
           autocomplete="off">
           </el-input>
        </el-form-item>
        <el-form-item label="缴费周期(单位:月)：" label-width="150px">
          <el-input
          v-model="updinfo.paymentcycle"
          placeholder="必填，请填写缴费周期"
           autocomplete="off">
           </el-input>
        </el-form-item>
        <el-form-item label="计费单价(单位:元)：" label-width="150px">
          <el-input
          v-model="updinfo.money"
          placeholder="必填，请填写计费单价"
           autocomplete="off">
           </el-input>
        </el-form-item>
        </el-form>
        <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="upd()">保存</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
data(){
    return{
        updinfo:{},
        dialogFormVisibleupdate:false,
        addinfo:{},
        dialogFormVisible:false,
        pagination:[]
    }
},
methods:{
  demo2(row){
    let url="shoufei/del";
    let param={id:row.pid};
    this.$axios.post(url,param).then(resp=>{this.find()});
  },
    upd(){
        let url="shoufei/upd";
        this.$axios.post(url,this.updinfo).then(resp=>{this.find();this.dialogFormVisibleupdate=false;this.updinfo={};})
    },
    demo(row){
        this.updinfo=row;
        this.dialogFormVisibleupdate=true;
    },
    add(){
        let url="shoufei/add";
        this.$axios.post(url,this.addinfo).then(resp=>{this.find();this.dialogFormVisible=false;this.addinfo={};});
    },
    find(page=1,pagesize=5){
        let url="shoufei/findAll";
        let param={page:page,pagesize:pagesize};
        this.$axios.post(url,param).then(resp=>{this.pagination = resp.data.result;console.log(this.pagination)});
    },
      handleSizeChange(pageSize) {
      this.find(this.pagination.current, pageSize);
    },
    //当前页面发生改变，查询
    handleCurrentChange(page) {
      this.find(page, this.pagination.size);
    }
},
mounted(){
    this.find();
}
}
</script>

<style>

</style>